<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map-state</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <p>{{count}}</p>
        <p>{{name}}</p>
    </div>

    <script>
        const store = new Vuex.Store({
            state:{
                msg:"你好",
                count:0,
                name:"小明"
            },
            mutations:{
                increment(state){
                    store.state.count++;
                }
            }
        })

        var app = new Vue({
            el:"#app",
            // 将全局的store对象注入根组件app中，以后所有子组件都可以访问
            store:store,
            // computed:{
            //     message(){
            //         return this.$store.state.msg;
            //     },
            //     count(){
            //         return this.$store.state.count;
            //     },
            //     name(){
            //         return this.$store.state.name;
            //     }
            // },
            // 使用mapState 进行状态管理  没有模板化要使用Vuex.mapState({选项对象} )  
            // 选项对象中应该写接受的参数 值为一个函数 传入state 返回state中键对应的值
            computed:Vuex.mapState({
                message:state=>state.msg,
                // 可以进行简化  直接传入字符串'count'  等同于state=>state.count
                // count:state=>state.count,
                count:"count",
                name:state=>state.name,
            })
        })



    </script>


</body>
</html>